Slide

Overview

Add a slideshow with each slide featuring a full-width image or video. Each slide can include optional text, links, and call-to-action elements to highlight key messages for your visitors and clients. With slides you can welcome visitors on the landing page or provide a link to collections. Or use them as an appealing design element to structure a long page.

Tip

To see examples of Slides in use, visit our Demo Page.

Add slides to a page

  1. In the Main Administrative Menu, navigate to Content.
  2. In the Content Overview table, locate the page where you want to add Slides and click Edit.
  3. Scroll to the bottom of the page editor. From the Add Section dropdown menu, select Add Slides.
  4. (Optional) In the Headline field, enter a title or description text.
  5. In the Link section, you can add an internal path or a URL to direct visitors to another page. You can display the link as a button, info icon, or external link.
  6. Expand Display Options to add media, position textbox, configure background colors and set other slide options. See Field Reference below to learn how to tailor your slide display.
  7. To add more slides, click Add Section to Slide.

Field Reference

Headline
Add a title and descriptive text to your slide. Use the text editor toolbar to apply formatting and styles as needed.

Link section:

  • URL
    Enter an external URL, an internal path, or just start typing the content title and autocomplete will suggest matching items.
  • Link text
    Enter a label that should appear on the slide's link button.
  • Select a style dropdown
    • Primary button: If you leave the Link text field empty, the slide remains clickable, but no button is displayed.
    • Outline button: Unlike a filled Primary button, this style uses a border and transparent background. Best suited for secondary actions and supporting links, when a Primary button should take visual priority.
      NOTE: Select an Accent Color in Page settings (right-hand sidebar) to customize the border color.
    • Info icon on the bottom left corner: Displays the icon even if you leave the Link text field empty.
    • External link: If you leave the Link text field empty, displays the external link as a raw URL.
  • Open link in new window toggle
    Enable the option to open the link in a new window.

Tip

Choose an Accent Color in Page settings (right-hand sidebar) to customize button and link colors within the page content.

For more info, refer to Assign accent colors to individual pages in Change Look and Feel.

Display Options panel

Display Options are essential for configuring the appearance and behavior of your slides. For the best results:

  • Keep the same size for all uploaded images and videos within a slide element for a smooth transitions.
  • Upload desktop and mobile versions of your images and videos where appropriate.
  • Ensure text is placed over clear areas of the image.
  • Use textbox background colors to improve readability.

Background-Media Paragraph
Upload an image or video file for the slide.

Background-Image Paragraph Mobile
Upload an alternative image optimized for mobile devices.

Background Color Paragraph
The background color for your slide affects the color of the text within the textbox. If you select a dark background, the font color will automatically appear white. It won't interfere with the image display. 

Tip

To learn where to define new background colors for your Paragraph Types, see Define background colors for paragraph types in Change Look and Feel.

Position Textbox
Choose where the textbox appears on the slide. The default None option positions the textbox to the top left corner.

Background-Color Textbox
Set a background color for the textbox independently of the slide background.

Minimal Height of Paragraph 
Define the slide height in your browser. With a fixed height value, the width of the image will change to match the size of the browser window.
You can either set the slide height here or upload images that already have proper dimensions for your slide. In this case, enable Use Image Dimensions.

Use Parallax Effect
Enable the parallax scrolling effect. To learn more about this feature, refer to Parallax Effect.

Use Image Dimensions
Enable the option to specify the size of an image for the slide before uploading it and maintain a consistent appearance across screen sizes. The display is responsive.

Important

The recommended image size for slides is 1920 x 1080 px.
You can change the height of the image file, while keeping the width at 1920 px. For example, upload 1920 x 700 px to create a shorter banner-style slide.

Add Section dropdown
Add more slides to the slideshow.

Quick Demo: Add slides to a page and configure display options.

Configure slideshow behavior

Fine-tune your slideshow with effects and controls available in Display Options (Slideshow).

Field Reference

Use fade effect
Apply this transition effect to make a slide fade out.

Show Play/Pause button
Let users control auto-rotation of the slides. Providing a pause option improves accessibility, particularly for users who are sensitive to motion or distracted by moving content.

Note

If a user has enabled Reduced Motion in their system settings, auto-rotation is automatically paused.

Show slide indicators
Display navigation dots showing the number of slides and the current position of the slide in the carousel.

Shuffle mode
Play a specified number of slides in a random order. This option helps to ensure page performance if you choose to display a large number of slides.

Shuffle interval
Define how often the slide order is reshuffled.

Important

Use this setting carefully, as it affects the entire page. The smaller the interval, the more frequently the page is rerendered.

Maximum number of slides in shuffle mode
Limit the number of slides displayed during a shuffle sequence.